{#
/**
 * @file
 * Theme override for an item list.
 *
 * Available variables:
 * - items: A list of items. Each item contains:
 *   - attributes: HTML attributes to be applied to each list item.
 *   - value: The content of the list element.
 * - title: The title of the list.
 * - list_type: The tag for list element ("ul" or "ol").
 * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
 * - attributes: HTML attributes to be applied to the list.
 * - empty: A message to display when there are no items. Allowed value is a
 *   string or render array.
 * - context: A list of contextual data associated with the list. May contain:
 *   - list_style: The custom list style.
 *
 * @see template_preprocess_item_list()
 */
#}

{# {% if items or empty %}
  {%- if title is not empty -%}
    <h3>{{ title }}</h3>
  {%- endif -%}

  {%- if items -%}
    <ol class="m-2">
      {%- for item in items -%}
        <li class="">{{ item.value }}</li>
      {%- endfor -%}
    </ol>
  {%- else -%}
    {{- empty -}}
  {%- endif -%}
{%- endif %} #}

{%
  set classes = [
    'item-list',
    'item-list--search-results',
    'bg-white',
    'rounded-sm',
    'shadow-md',
    'overflow-hidden',
  ]
%}
<div{{ attributes.addClass(classes) }}>
  {% if title %}
    <h3 class="text-xl font-bold bg-gray-50 px-6 py-4 border-b border-gray-200 text-gray-800">
      {{ title }}
    </h3>
  {% endif %}
  
  {% if items %}
    <ul{{ list_attributes.addClass('divide-y divide-gray-100') }}>
      {% for item in items %}
        <li{{ item.attributes.addClass('hover:bg-gray-50 transition-colors duration-150') }}>
          {{ item.value }}
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <div class="px-6 py-12 text-center text-gray-500">
      <p class="mb-4">No results found for your search.</p>
      
    </div>
  {% endif %}
</div>